<template>
	<view class="nav-bar b-b">
		<view class="mask cu-modal" :class="{ show: showSel }" style="z-index: 8;" @tap="hideModal"></view>
		<view class="positon-box">
			<view class="nav-bar-box">
				<view class="nav-item" v-for="(item, index) in navs" :key="index" @click="navChange(index)">
					<view class="tit-wrap">
						<view class="tit" :class="{'active': current == index}">{{ item.name }}</view>
						<view :class="{'active': current == index}" v-if="counts.length > index && counts[index] >= 0"
							class="number">({{ counts[index] }})</view>
					</view>
					<view class="line" :class="{'line--show': current === index}"></view>
				</view>
			</view>
			<view class="search-bar" v-if="showSearch">
				<input class="uni-input form-input" name="input" placeholder="搜索项目编号、名称"/>
				<view class="pack-up" @tap='packUp()'>
					<image class="" src="../../../static/images/icon_arrow_left.png" mode=""></image>
				</view>
				<image class="position-image" src="../../../static/images/icon_found.png" mode=""></image>
			</view>
			<view class="nav-bar-right" @tap="showHide()">
				<view class="right-text">筛选</view>
				<image src="../../../static/images/icon_arrow_down.png" mode=""></image>
			</view>
			<view class="time-box" v-if='current===0'>
				<view class="list-box"  v-if="heightNum===200" :style="{height:heightNum+'rpx'}">
					<view class="time-list" :class="isActive===index? 'active' : '' " v-for="item,index in dataTimeList" :key="index"  @click="changeActive(item.BATCH,index)">
						<view class="item-time">{{item.STARTTIME}}-{{item.ENDTIME}}</view>
						<view class="item-text">项目送报({{item.NUM}})</view>
					</view>
				</view>
				<view class="more-scc" @click="showTime()">
					<image v-show="heightNum===200" src="../../../static/images/icon_up_close.png" mode=""></image>
					<image v-show="heightNum===0" src="../../../static/images/icon_down_open.png" mode=""></image>
				</view>
			</view>
		</view>
		<form>
			<view class="sel-box-two" v-if="showSel">
				<view class="box-two-item">
					<view class="item-text">行业类别</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['inve_field'])"
						class="item-picker" range-key="CODE_NAME" data-type="INDUSTRY" data-dic="inve_field">
						<view class="uni-input" v-if="!formText.INDUSTRY">请选择</view>
						<view class="value" v-else>{{formText.INDUSTRY}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item">
					<view class="item-text">重要性</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['STAR_TYPE'])" class="item-picker"
						range-key="CODE_NAME" data-type="EVALUATE" data-dic="STAR_TYPE">
						<view class="uni-input" v-if="!formText.EVALUATE">请选择</view>
						<view class="value" v-else>{{formText.EVALUATE}}</view>
					</picker>
		
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item">
					<view class="item-text">跟进人</view>
					<picker @change="bindPickerChange" :range="perData" class="item-picker" range-key="CODE_NAME"
						data-type="MANAGER">
						<view class="uni-input" v-if="!formText.MANAGER">请选择</view>
						<view class="value" v-else>{{formText.MANAGER}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item">
					<view class="item-text">项目状态</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['busProjStatus'])"
						class="item-picker" range-key="CODE_NAME" data-type="PROJ_STATUS" data-dic="busProjStatus">
						<view class="uni-input" v-if="!formText.PROJ_STATUS">请选择</view>
						<view class="value" v-else>{{formText.PROJ_STATUS}}</view>
					</picker>
		
				</view>
				<view class="box-two-item">
					<view class="item-text">建档日期</view>
		
					<view class="uni-input" @tap="showRangeDate" data-type="CREATE_TIME"
						v-if="!formText.CREATE_TIME">请选择</view>
					<view class="value" v-else>{{formText.CREATE_TIME}}</view>
		
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item">
					<view class="item-text">投产年份</view>
					<picker @change="bindChangeDate" mode="date" class="item-picker" data-type="produceYear"
						start="2019" end="2021" fields="year" data-dic="year">
						<view class="uni-input" v-if="!formText.produceYear">请选择</view>
						<view class="value" v-else>{{formText.produceYear}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item">
					<view class="item-text">期限月份</view>
					<picker @change="bindChangeDate" mode="date" class="item-picker" data-type="siteLastMonth"
						start="2019" end="2021" fields="month" data-dic="month">
						<view class="uni-input" v-if="!formText.siteLastMonth">请选择</view>
						<view class="value" v-else>{{formText.siteLastMonth}}</view>
		
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item">
					<view class="item-text">启动时间</view>
					<view class="uni-input" @tap="showRangeDate" v-if="!formText.PROJ_START_UP"
						data-type="PROJ_START_UP">请选择</view>
					<view class="value" v-else>{{formText.PROJ_START_UP}}</view>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item">
					<view class="item-text">达产未付</view>
					<picker @change="bindChangeRadio" :range="checkedData" class="item-picker"
						data-type="standBonus" range-key="CODE_NAME">
						<view class="uni-input" v-if="!formText.standBonus">请选择</view>
						<view class="value" v-else>{{formText.standBonus}}</view>
					</picker>
				</view>
				<view class="box-two-item">
					<view class="item-text">基本未付</view>
					<picker @change="bindChangeRadio" :range="checkedData" class="item-picker" data-type="baseBonus"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!formText.baseBonus">请选择</view>
						<view class="value" v-else>{{formText.baseBonus}}</view>
					</picker>
				</view>
				<view class="box-two-item">
					<view class="item-text">是否暂缓</view>
					<picker @change="bindChangeRadio" :range="checkedData" class="item-picker" data-type="ISREPRIEE"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!formText.ISREPRIEE">请选择</view>
						<view class="value" v-else>{{formText.ISREPRIEE}}</view>
					</picker>
				</view>
				<view class="box-two-item">
					<view class="btn-wrap" @tap="clear">
						<image src="../../../static/images/btn_chongzhi.png" class="btn-wrap-img"></image>
						<text class="text">重置</text>
					</view>
					<view class="btn-wrap" @tap="confirm">
						<image src="../../../static/images/btn_tijiao.png" class="btn-wrap-img"></image>
						<text class="text">确定</text>
					</view>
				</view>
			</view>
		
		</form>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" @confirm="bindChangeRangeDate" @cancel="onSelected" format="yyyy-mm" class="range-date"
			data-type="PROJ_START_UP" />
		</mx-date-picker>
	</view>
</template>

<script>
	/**
	 * 顶部tab栏
	 */
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				isActive:0,
				countList: [],
				showSel: false, //综合选择
				index: 0,
				showPicker: false,
				date: '2019/01/01',
				type: 'rangetime',
				checkedData: [{
					CODE: 1,
					CODE_NAME: '是'
				}, {
					CODE: false,
					CODE_NAME: '否'
				}],
				formText: {
					"MANAGER": '',
					"PROJ_STATUS": '',
					produceYear: '',
					siteLastMonth: '',
					baseBonus: '',
					standBonus: '',
					"ISREPRIEE": '',
					"INDUSTRY": '',
					"EVALUATE": '',
					"CREATE_TIME": '',
					"PROJ_START_UP": ''
				},
				formData: {
					"MANAGER": false,
					"PROJ_STATUS": '',
					produceYear: '',
					siteLastMonth: '',
					baseBonus: '',
					standBonus: '',
					"ISREPRIEE": '',
					"INDUSTRY": '',
					"EVALUATE": '',
					"CREATE_TIME": '',
					"PROJ_START_UP": ''
				},
				heightNum:200,
			}
		},
		props: {
			navs: {
				type: Array,
				default () {
					return [];
				}
			},
			current: {
				type: Number,
				default: 0
			},
			counts: {
				type: Array,
				default () {
					return [];
				}
			},
			dicData: {
				type: Object,
				default: {}
			},
			perData: {
				type: Array,
				default: []
			},
			showSearch:{
				type:Boolean,
				default:false
			},
			dataTimeList:{
				type: Array,
				default: []
			},
		},
		watch: {
			dicData() {
				console.log('dic:', this.dicData)
				//this.industyData = JSON.parse(this.dicData['inve_field'])

			},
			dataTimeList(){
				if(this.dataTimeList.length){
					this.changeActive(this.dataTimeList[0].BATCH,0)
				}
			}
		},
		methods: {
			showTime(){
				if(this.heightNum===200){
					this.heightNum=0
				}else{
					this.heightNum=200
				}
				this.$emit('onHeightChange', this.heightNum);
			},
			changeActive(batch,num){
				this.isActive=num
				this.$emit('onBatch', batch);
			},
			navChange(index) {
				this.$emit('onChange', index);
			},
			showHide() {
				this.showSel = true;
			},
			hideModal() {
				this.showSel = false;
			},
			clear() {
				const formTextValue = {
					...this.formText
				};
				const formDatas = {
					...this.formData
				}
				for(let key in formTextValue){
					formTextValue[key] = ''
				}
				for(let key in formDatas){
					formDatas[key] = ''
				}
				this.formText = formTextValue;
				this.formData = formDatas;
			},
			confirm(){
				console.log('this.formdata',this.formData)
				this.$emit('onConfirm',this.formData)
				this.showSel = false;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				const type = e.currentTarget.dataset.type;
				const dic = e.currentTarget.dataset.dic;
				const index = e.target.value;
				const formTextValue = {
					...this.formText
				};
				const formDatas = {
					...this.formData
				}
				console.log(type, dic)
				if(type === 'MANAGER'){
					formTextValue[type] = this.perData[index].CODE_NAME
					formDatas[type] = this.perData[index].CODE
				} else {
					formTextValue[type] = JSON.parse(this.dicData[dic])[index].CODE_NAME;
					formDatas[type] = JSON.parse(this.dicData[dic])[index].CODE
				}
				this.formText = formTextValue;
				this.formData = formDatas;
				console.log(this.formText,"this.formTextthis.formText")

			},
			bindChangeRadio(e) {
				const type = e.currentTarget.dataset.type;
				const index = e.target.value;
				const formTextValue = {
					...this.formText
				}
				const formDatas = {
					...this.formData
				}
				formTextValue[type] = this.checkedData[index].CODE_NAME;
				formDatas[type] = this.checkedData[index].CODE;
				this.formText = formTextValue;
				this.formData = formDatas;
			},
			bindChangeDate(e) {
				const type = e.currentTarget.dataset.type;
				const index = e.target.value;
				const formTextValue = {
					...this.formText
				}
				const formDatas = {
					...this.formData
				}
				formTextValue[type] = e.detail.value;
				formDatas[type] = e.detail.value;
				this.formText = formTextValue;
				this.formData = formDatas;
			},

			bindChangeRangeDate(e) {
				console.log('e2', e);
				const formTextValue = {
					...this.formText
				}
				const formDatas = {
					...this.formData
				}
				formTextValue[this.dataType] = e.value.join('~');
				formDatas[this.dataType] = e.value.join('~');
				this.formText = formTextValue;
				this.formData = formDatas;
				this.showPicker = false;
			},
			onSelected(e) { //选择
				this.showPicker = false;

				if (e) {

					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
			dateChange(e) {
				console.log(e)
			},
			showRangeDate(e) {
				this.dataType = e.currentTarget.dataset.type
				this.showPicker = true;
			}
		},
	}
</script>

<style scoped lang='scss'>
	view {
		display: flex;
		flex-direction: column;
	}

	.btn-wrap-img {
		width: 100rpx !important;
		height: 40rpx !important;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.btn-wrap {
		display: flex;
		position: relative;
		text-align: center;
		align-items: center;
		width: 130rpx;
		margin-right: 5px;
		height: 40rpx;

		.text {
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			position: absolute;
			z-index: 2;
			top: 10rpx;
			left: 55rpx;
		}
	}

	/deep/.form-picker {
		font-size: 26rpx;
	}

	.item-picker {
		flex: 1
	}

	.fill-view {
		height: 80rpx;
		width: 100%;
	}

	.nav-bar {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* padding:0 30rpx; */
		background-color: #fff;
		z-index: 90;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */

		&:after {
			border-color: #f7f7f7;
		}

	}

	.positon-box {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* padding:0 30rpx; */
		background-color: #fff;
		position: relative;
	}
	.time-box{
		border-top:2px solid #f7f7f7;
		position: absolute;
		left: 0;
		top: 80rpx;
		background-color: #ffffff;
		.list-box{
			width: 750rpx;
			height: 0;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			color: #808080;
			padding-right: 30rpx;
			.time-list{
				margin-top: 16rpx;
				margin-left: 30rpx;
				width: 210rpx;
				height: 70rpx;
				background-image: url(../../../static/images/btn_week.png);
				background-repeat: no-repeat;
				background-size: 210rpx 70rpx;
				justify-content: center;
				align-items: center;
				.item-time{
					font-size: 26rpx;
				}
				.item-text{
					font-size: 22rpx;
				}
			}
			.active{
				color:#0099cc;
				background-image: url(../../../static/images/btn_week_active.png);
			}
		}
		.more-scc{
			width: 750rpx;
			height: 30rpx;
			background-color: #FFFFFF;
			border-top:2px solid #f7f7f7;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 48rpx;
				height: 28rpx;
			}
		}
	}
	.nav-bar-box {
		width: 360rpx;
		height: 80rpx;
		font-size: 26rpx;
		background-color: #FFFFFF;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		position: relative;
		margin-left: 30rpx;
	}

	.nav-bar-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 30rpx;

		.right-text {
			width: 60rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-size: 26rpx;
			letter-spacing: 0px;
			color: #808080;
		}

		image {
			width: 13rpx;
			height: 7rpx;
		}
	}

	.nav-item {
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		padding-top: 4rpx;
		position: relative;
	}

	.tit-wrap {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.number {
		/* position: absolute; */
		/* 	right: -20rpx;
		top: 0px; */
		min-width: 36rpx;
		height: 36rpx;
		padding: 0 6rpx;
		text-align: bottom;
		line-height: 28rpx;
		color: #808080;
		border: 4rpx solid #fff;
		border-radius: 100rpx;
		font-size: 20rpx;
	}

	.tit {
		font-size: 26rpx;
		color: #808080;
	}

	.active {
		color: #0099cc;
		/* font-weight: 700; */
	}

	.line {
		width: 150rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background-color: #0099cc;
		opacity: 0;

		&--show {
			opacity: 1;
		}
	}

	.sel-box-two {
		position: absolute;
		top: 80rpx;
		right: 0;
		width: 750rpx;
		background-color: #ffffff;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
		transition: all ease-out 0.2s;
		z-index: 999;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 23rpx 0;
	}

	.box-two-item {
		width: 375rpx;
		margin: 8rpx 0;
		font-size: 26rpx;
		color: #808080;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.item-text {
			width: 110rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-size: 26rpx;
			color: #414a5d;
			margin-left: 32rpx;
		}

		.item-choose {
			width: 60rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-size: 26rpx;
			color: #808080;
			margin-left: 36rpx;
		}

		image {
			width: 26rpx;
			height: 27rpx;
			margin-left: 30rpx;
		}
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		-webkit-transform: scale(1.185);
		transform: scale(1.185);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000px;
		perspective: 1000px;
		background: rgba(0, 0, 0, 0.6);
		-webkit-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.show {
		opacity: 0;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
</style>
